$(function(){
    var myVal;
    var moveNum=1;
    var ul=$('#banner ul');
    var my_li=ul.find('li').outerWidth(true);

    function changeLi(dir){
        if(dir=='r'){
            $('ul li:first').appendTo(ul);
        }else{
            $('ul li:last').prependTo(ul);
        }
    }

    function move(dir){
        var leftVal=0;
        if(dir=='r'){
           leftVal=-moveNum*my_li;
        }else{
            changeLi('l');
            leftVal=moveNum*my_li;
            ul.css({left:-leftVal});
            leftVal=0;
        }
        ul.animate({left:leftVal},500,function(){
            if(dir=='r'){
                changeLi('r');
            }
            ul.css({left:0});
        });
    }
    function next(){
        move('r');
    }
    function pre(){
        move('l');
    }
    function autoRun(dir){
        myVal=setInterval(function(){
            move(dir);
        },2000)
    }
    function clearRun(){
        clearInterval(myVal);
    }
    $('.next').click(function(){
        clearRun();
        next();
        autoRun('r');
    });
    $('.pre').click(function(){
        clearRun();
        pre();
        autoRun('l');
    });
});